<template>
  <!-- 视频查看 -->
  <div class="PlayVideo" v-if="show">
    <!-- 关闭按钮 -->
    <div class="close" v-if="false">
      <i class="el-icon-close" style="color:#232b51" @click="close" />
<!--      <img src="~@assets/imgs/rtps-icon/close.png" alt="" @click="close" />-->
    </div>
    <!-- 视频播放 -->
    <video
      class="video"
      controls=""
      ref="video"
      id="video"
      v-on:error.prevent="error($event)"
    >
    </video>
    <!-- 信息提示 -->
    <div class="msg" v-if="isError">
      <div  style="color: #fff">{{errMsg}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlayVideo",
  props: ["videoUrl"],
  data() {
    return {
      show: true,
      isError: false, // 是否不能播放视频
      errMsg: "",
    };
  },
  computed: {},
  components: {},
  mounted() {
    this.$refs.video.src = this.videoUrl
    let video = document.getElementById("video");
    // 如果是手机端，在挂载时播放
    if(this.isMobile){
      video.play()
    }
  },
  methods: {
    close() {
      this.show = false;
      this.$emit("close");
    },
    error(e) {
      console.log(e);
      if(this.videoUrl == ''){
        this.isError = true
        this.errMsg = "该文章暂无视频！"
      }else{
        this.isError = true
        this.errMsg = "视频链接失效！无法播放！"
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.PlayVideo {
  /*width: 45.3125vw;*/
  /*height: 50.1vh;*/
  width: 100%;
  height: 100%;
  position: relative;
  // z-index: 99999;
  // background: rgba(0, 0, 0, 0.5);
  .close {
    position: absolute;
    top: -32px;
    right: -32px;
    z-index: 9999;
  }
  .video {
    width: 100%;
    height: 100%;
    background: #000;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%);
    // z-index: 100000;
  }
  .msg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
}
</style>
